{% extends "pages/auth/_layout.html" %}
{% from "components/macros.html" import submit_button %}
{% from "components/auth_macros.html" import auth_field, auth_banner %}

{% block title %}Sign in - {{ project_name }}{% endblock %}

{% block auth_form %}
<div x-data="loginForm()">
  <h1 class="text-2xl font-semibold text-white mb-2">Welcome back</h1>
  <p class="text-sm text-aegis-muted mb-8">Sign in to continue.</p>

  {# Native form POST, deliberately: the browser has to see a real
     current-password submit followed by a redirect response for its
     "Save password?" prompt to fire. A fetch()/@submit.prevent version of
     this form works but silently kills that prompt. The only JS here flips
     the button label before navigation.

     Chrome will still refuse to offer the prompt on plain http://localhost.
     That is a Chrome rule, not a bug here - do not chase it. #}
  <form action="/login" method="post" class="space-y-4" @submit="loading = true">
    {% if next %}<input type="hidden" name="next" value="{{ next }}">{% endif %}

    {{ auth_banner("success", tone="ok") }}
    {{ auth_banner("error") }}

    {{ auth_field("email", "Email", type="email", autocomplete="username", placeholder="you@domain.com") }}

    {% call auth_field("password", "Password", type="password", autocomplete="current-password", placeholder="••••••••") %}
      <a href="/forgot-password" class="text-xxs text-aegis-muted hover:text-aegis-teal transition-colors">Forgot?</a>
    {% endcall %}

    {{ submit_button("Sign in", "Signing in…") }}
  </form>
</div>

<script>
function loginForm() {
  return {
    loading: false,
    error: '',
    success: '',

    init() {
      // Banner text is driven by the query string: the server-side handlers
      // redirect back here with a reason rather than rendering the message
      // themselves, so a refresh never re-posts the form.
      const p = new URLSearchParams(window.location.search);
      if (p.get('registered')) this.success = 'Account created. Check your email to verify it.';
      if (p.get('verified')) this.success = 'Email verified. Sign in to continue.';
      if (p.get('reset')) this.success = 'Password updated. Sign in with your new password.';

      const err = p.get('error');
      if (err === 'invalid') {
        this.error = 'Incorrect email or password.';
      } else if (err === 'locked') {
        this.error = 'Account temporarily locked after too many failed attempts. Try again shortly.';
      }
    },
  };
}
</script>
{% endblock %}

{% block auth_footer %}
{% if registration_enabled %}
New here? <a href="/register" class="text-aegis-teal hover:text-white transition-colors">Create an account</a>.
{% else %}
<span class="text-aegis-muted">Signups are closed right now.</span>
{% endif %}
{% endblock %}